<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
      <!-- 引入样式 -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <!-- Favicon -->
      <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
      <!-- Typography CSS -->
      <link rel="stylesheet" th:href="@{/css/typography.css}">
      <!-- Style CSS -->
      <link rel="stylesheet" th:href="@{/css/style.css}">
      <!-- Responsive CSS -->
      <link rel="stylesheet" th:href="@{/css/responsive.css}">
      <!-- 引入element样式 -->
<!--      <link rel="stylesheet" th:href="@{/css/https_unpkg.com_element-ui_lib_theme-chalk_index.css}">-->

   </head>
   <body>
      <!-- loader Start -->
      <div id="loading">
         <div id="loading-center">
         </div>
      </div>
      <!-- loader END -->
      <!-- Wrapper Start -->
      <div class="wrapper">
         <!-- Sidebar  引入公共列表-->
         <div th:include="public::list" class="iq-sidebar"></div>
         <!-- Responsive Breadcrumb End-->
         <!-- Page Content  -->
         <div id="content-page" class="content-page">
            <!-- TOP Nav Bar  引入公共头部-->
            <div th:include="public::top" class="iq-top-navbar"></div>
            <!-- TOP Nav Bar END -->
            <div class="container-fluid" id="content">
               <div class="row">
                  <div class="col-sm-12">
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">志愿者信息列表</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <div id="table" class="table-editable">
                               <span class="table-add float-left mb-3 mr-2">
                                 <button @click="checkAll()" class="btn btn-sm iq-bg-info">
                                    <i class="ri-add-fill"><span class="pl-1">全选</span></i>
                                 </button>
                              </span>
                              <span class="table-add float-left mb-3 mr-2">
                                 <button @click="delAll()" class="btn btn-sm iq-bg-danger">
                                    <i class="ri-delete-bin-2-fill"><span class="pl-1">删除</span></i>
                                 </button>
                              </span>
                              <span class="table-add float-left mb-3 mr-2">
                                 <button class="btn btn-sm iq-bg-success">
                                    <i class="ri-add-fill"><a th:href="@{/admin/toAdd}" class="pl-1">新增</a></i>
                                 </button>
                              </span>

                              <span class="table-add float-left mb-3 mr-2">
                                    <input v-model="searchTip" type="text" class="search-input" placeholder="搜索">
                                    <button class="btn btn-sm iq-bg-info" @click="searchByTip()">
                                       <i class="ri-search-eye-fill"><span class="pl-1">搜索</span></i>
                                    </button>
                              </span>
                              
                              <span class="table-add float-right mb-3 mr-2">
                                 <select class="form-control-plaintext" id="selectuserrole">
                                    <option @click="selectByRole(0)">所有用户</option>
                                    <option v-for="(role) in roleList" v-text="role.roleName" @click="selectByRole(role.id)"></option>
                                 </select>
                              </span>
                              <table class="table table-bordered table-responsive-md table-striped text-center">
                                 <thead>
                                    <tr>
                                       <th>id</th>
                                       <th>头像</th>
                                       <th>用户名</th>
                                       <th>密码</th>
                                       <th>角色</th>
                                       <th>创建时间</th>
                                       <th>状态</th>
                                       <th>其它信息</th>
                                       <th>操作</th>
                                    </tr>
                                 </thead>
                                 <tbody>
                                    <tr v-for="(user) in list">
                                       <td>
                                          <div class="custom-control custom-checkbox custom-control-inline">
                                             <input type="checkbox" name="checkUser" class="custom-control-input" :id="user.id" :value="user.id">
                                             <label class="custom-control-label" :for="user.id" v-text="user.id"></label>
                                          </div>
                                       </td>
                                       <td>
                                           <img v-if="user.userImg==null" th:src="@{/images/user/1.jpg}" class="img-fluid rounded mr-1" alt="user"/>
                                           <img v-if="user.userImg!=null" :src="'../upload/'+user.userImg" style="width: 100px;height: 100px;" class="img-fluid rounded mr-1" alt="user"/>
                                       </td>
                                       <td v-text="user.username"></td>
                                       <td v-text="user.password"></td>
                                       <td v-text="user.role.roleName"></td>
                                       <td v-text="myFormatDate(user.createTime)"></td>
                                       <td>
                                          <button v-if="user.state==1" type="button" class="btn iq-bg-success btn-rounded btn-sm my-0">正常</button>
                                          <button v-if="user.state==0" type="button" class="btn iq-bg-danger btn-rounded btn-sm my-0">禁用</button>
                                       </td>
                                       <td>
                                          <span class="table-remove">
                                             <div type="button" @click="showInfo(user.id)" class="btn iq-bg-info btn-rounded btn-sm my-0" data-toggle="modal" data-target="#exampleModalCenter">查看</div>

                                          </span>
                                       </td>
                                       <td>
                                          <span class="table-remove">
                                             <button @click="getUser(user.id)" type="button" class="btn iq-bg-warning btn-rounded btn-sm my-0" data-toggle="modal" data-target="#exampleModalCenter2">修改</button>
                                             <button @click="delUser(user.id)" type="button" class="btn iq-bg-danger btn-rounded btn-sm my-0">删除</button>
                                          </span>
                                       </td>
                                    </tr>


                                 
                                 </tbody>
                                 
                              </table>
                              <div class="iq-card-body">
                                 <nav aria-label="Page navigation example">
                                    <ul class="pagination mb-0">
                                       <li v-bind:class="{'disabled': (pageNum == 1)}" @click="getList(pageNum-1)" class="page-item">
                                          <a class="page-link" href="#" aria-label="Previous">
                                          <span aria-hidden="true">&laquo;</span>
                                          </a>
                                       </li>
<!--                                       <li class="page-item active"><a class="page-link" href="#">1</a></li>-->
<!--                                       <li class="page-item"><a class="page-link" href="#">2</a></li>-->
<!--                                       <li class="page-item"><a class="page-link" href="#">3</a></li>-->

                                       <li class="page-item" v-if="pageNum > 6"><span>...</span></li>
                                       <li class="page-item" v-for="i of pages" v-if="i > pageNum-6 && i < pageNum+6" @click="getList(i)" v-bind:class="{'active': (i==pageNum)}">
                                          <a class="page-link" href="javascript:void(0)" v-text="i">1</a>
                                       </li>
                                       <li class="page-item"  v-if="pageNum < pages-5"><span>...</span></li>

                                       <li v-bind:class="{'disabled': (pageNum == pages)}" @click="getList(pageNum+1)" class="page-item">
                                          <a class="page-link" href="#" aria-label="Next">
                                          <span aria-hidden="true">&raquo;</span>
                                          </a>
                                       </li>

                                       <li class="page-item disabled"><span v-text="'总页数：'+ pages">总页数：1</span></li>
                                    </ul>
                                 </nav>
                              </div>

                              <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                 <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                       <div class="modal-header">
                                          <h5 class="modal-title" id="exampleModalCenterTitle" v-text="userInfo.name">Modal title</h5>
                                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                             <span aria-hidden="true">&times;</span>
                                          </button>
                                       </div>
                                       <div class="modal-body">

<!--                                          <div class="form-group row">-->
<!--                                             <label class="control-label col-sm-2 align-self-center mb-0" for="email">Email:</label>-->
<!--                                             <div class="col-sm-10">-->
<!--                                                <input type="email" class="form-control" id="email" placeholder="Enter Your  email">-->
<!--                                             </div>-->
<!--                                          </div>-->

                                          <div class="form-group">
                                             <label for="exampleInputDisabled1">姓名:</label>
                                             <input type="text" class="form-control" id="exampleInputDisabled1" disabled="" :value="userInfo.name">
                                          </div>

                                          <div class="form-group">
                                             <label for="exampleInputDisabled2">电话:</label>
                                             <input type="text" class="form-control" id="exampleInputDisabled2" disabled="" :value="userInfo.phone">
                                          </div>

                                          <div class="form-group"  v-show="userInfo.sex==1">
                                             <label for="exampleInputDisabled3">性别:</label>
                                             <input type="text" class="form-control" id="exampleInputDisabled3" disabled="" value="男">
                                          </div>
                                          <div class="form-group"  v-show="userInfo.sex==0">
                                             <label for="exampleInputDisabled4">性别:</label>
                                             <input type="text" class="form-control" id="exampleInputDisabled4" disabled="" value="女">
                                          </div>

                                          <div class="form-group">
                                             <label for="exampleInputDisabled5">特长:</label>
                                             <input type="text" class="form-control" id="exampleInputDisabled5" disabled="" :value="userInfo.spec">
                                          </div>

                                          <div class="form-group">
                                             <label for="exampleInputDisabled5">完成志愿数:</label>
                                             <input type="text" class="form-control" id="exampleInputDisabled6" disabled="" :value="userInfo.volNum">
                                          </div>

                                       </div>
                                       <div class="modal-footer">
                                          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<!--                                          <button type="button" class="btn btn-primary">Save changes</button>-->
                                       </div>
                                    </div>
                                 </div>
                              </div>

                              <div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                 <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                       <div class="modal-header">
                                          <h5 class="modal-title" id="exampleModalCenterTitle2" v-text="user.username">Modal title</h5>
                                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                             <span aria-hidden="true">&times;</span>
                                          </button>
                                       </div>
                                       <div class="modal-body">

                                          <div class="form-group row">
                                             <label class="control-label col-sm-2 align-self-center mb-0" for="username">用户名:</label>
                                             <div class="col-sm-10">
                                                <input v-model="user.username" type="text" disabled="" class="form-control" id="username">
                                             </div>
                                          </div>

                                          <div class="form-group row">
                                             <label class="control-label col-sm-2 align-self-center mb-0" for="password">密码:</label>
                                             <div class="col-sm-10">
                                                <input v-model="user.password" type="text" class="form-control" id="password">
                                             </div>
                                          </div>

                                          <div class="form-group row">
                                             <label class="control-label col-sm-2 align-self-center mb-0" for="role">角色:</label>
                                             <div class="col-sm-10">
                                                <select class="form-control-plaintext" v-model="user.roleId" id="role">
                                                   <option v-for="(role) in roleList" v-text="role.roleName" :value="role.id" :selected="user.roleId==role.id"></option>
                                                </select>
                                             </div>
                                          </div>

                                          <div class="form-group row">
                                             <label class="control-label col-sm-2 align-self-center mb-0" for="status">状态:</label>
                                             <div class="col-sm-10">
                                                <select class="form-control-plaintext" v-model="user.state" id="status">
                                                   <option :selected="user.state==1" value="1">正常</option>
                                                   <option :selected="user.state==0" value="0">禁用</option>
                                                </select>
                                             </div>
                                          </div>


<!--                                          <div class="form-group">-->
<!--                                             <label for="exampleInputDisabled-change1">姓名:</label>-->
<!--                                             <input type="text" class="form-control" id="exampleInputDisabled-change1" disabled="" :value="userInfo.name">-->
<!--                                          </div>-->


                                       </div>


<!--                                       <div class="alert alert-success" role="alert">-->
<!--                                          <div class="iq-alert-icon">-->
<!--                                             <i class="ri-alert-fill"></i>-->
<!--                                          </div>-->
<!--                                          <div class="iq-alert-text">A simple <b>success</b> alert—check it out!</div>-->
<!--                                       </div>-->

                                       <div class="modal-footer">
                                          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                          <button type="button" @click="updateUser()" data-dismiss="modal" class="btn btn-primary">保存修改</button>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>

            <!-- fixme: 测试element 用例 记得删除 -->
<!--            <div id="app">-->
<!--               <el-button @click="visible = true">Button</el-button>-->
<!--               <el-dialog :visible.sync="visible" title="Hello world">-->
<!--                  <p>Try Element</p>-->
<!--               </el-dialog>-->
<!--                <el-button :plain="true" @click="open1">消息</el-button>-->
<!--                <el-button :plain="true" @click="open2">成功</el-button>-->
<!--                <el-button :plain="true" @click="open3">警告</el-button>-->
<!--                <el-button :plain="true" @click="open4">错误</el-button>-->
<!--            </div>-->

            <!-- Footer  引入公共尾部-->
            <footer th:include="public::footer" class="bg-white iq-footer"></footer>
            <!-- Footer END -->
         </div>
      </div>
      <!-- Wrapper END -->
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script th:src="@{/js/jquery.min.js}"></script>
      <script th:src="@{/js/popper.min.js}"></script>
      <script th:src="@{/js/bootstrap.min.js}"></script>
      <!-- Appear JavaScript -->
      <script th:src="@{/js/jquery.appear.js}"></script>
      <!-- Countdown JavaScript -->
      <script th:src="@{/js/countdown.min.js}"></script>
      <!-- Counterup JavaScript -->
      <script th:src="@{/js/waypoints.min.js}"></script>
      <script th:src="@{/js/jquery.counterup.min.js}"></script>
      <!-- Wow JavaScript -->
      <script th:src="@{/js/wow.min.js}"></script>
      <!-- Apexcharts JavaScript -->
      <script th:src="@{/js/apexcharts.js}"></script>
      <!-- Slick JavaScript -->
      <script th:src="@{/js/slick.min.js}"></script>
      <!-- Select2 JavaScript -->
      <script th:src="@{/js/select2.min.js}"></script>
      <!-- Owl Carousel JavaScript -->
      <script th:src="@{/js/owl.carousel.min.js}"></script>
      <!-- Magnific Popup JavaScript -->
      <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
      <!-- Smooth Scrollbar JavaScript -->
      <script th:src="@{/js/smooth-scrollbar.js}"></script>
      <!-- lottie JavaScript -->
      <script th:src="@{/js/lottie.js}"></script>
      <!-- Chart Custom JavaScript -->
      <script th:src="@{/js/chart-custom.js}"></script>
      <!-- Custom JavaScript -->
      <script th:src="@{/js/custom.js}"></script>


<!--      <script th:src="@{/js/vue.js}"></script>-->
<!--      &lt;!&ndash; 引入element组件库 &ndash;&gt;-->
<!--      <script type="module" th:src="@{/js/https_unpkg.com_element-ui_lib_index.js}"></script>-->
      <!-- import Vue before Element -->
      <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
      <!-- import JavaScript -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script th:src="@{/js/axio.js}"></script>
      <!-- fixme: 编写时不注掉会导致自动生成大括号时生成错误     -->
      <script th:inline="javascript"> let rootUrl = [[@{/}]]; </script>


      <script>
         new Vue({
            el: "#content",
            data: {
               pageNum: 1,  //第几页
               pageSize: 3, //每页几条
               pages: 1, // 页面总数
               total: 0,  // 记录行数
               list: [],  // 数据
               userInfo: {}, // 查看用户信息存放处
               roleList: [], // 下拉角色列表选择数据存放处
               roleId: 0,  // 下拉角色列表 角色编号存放处
               searchTip: '', // 搜索框信息存放处
               user: {}   // 修改用户的用户信息存放处

            },
            mounted(){
               this.getList(1); // 页面渲染完毕，加载数据
               this.getRoleList();
            },
            methods:{
               getList(pageNum){
                  // 发送ajax请求，尝试登录
                  let url = rootUrl+`admin/getUserList?pageNum=${pageNum}&pageSize=${this.pageSize}`;
                  url = url+'&roleId='+this.roleId+'&searchInfo='+this.searchTip;
                  console.log(url);
                  axios.post(url)
                          .then(response => {
                             let data = response.data;
                             if (data.code !== 0) return;
                             let pageInfo = data.data;
                             this.pageNum = pageInfo.pageNum;
                             this.pageSize = pageInfo.pageSize;
                             this.pages = pageInfo.pages;
                             this.total = pageInfo.total;
                             this.list = pageInfo.list;
                          })
                          .catch(error => {
                             alert(error);
                          });
               },
               myFormatDate(value){//处理日期格式
                  let dt = new Date(value);
                  let year = dt.getFullYear();
                  let month = (dt.getMonth() + 1).toString().padStart(2,'0');
                  let date = dt.getDate().toString().padStart(2,'0');
                  let hour = dt.getHours().toString().padStart(2,'0');
                  let minute = dt.getMinutes().toString().padStart(2,'0');
                  let second = dt.getSeconds().toString().padStart(2,'0');
                  return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
               },
               showInfo(id){ // 模态框展示用户详细信息info
                  console.log(id);
                  let url = rootUrl+`admin/getInfoByUserId?id=${id}`;
                  axios.post(url)
                          .then(response => {
                             let data = response.data;
                             if (data.code !== 0) return;
                             console.log(data.data);
                             this.userInfo = data.data;

                          })
                          .catch(error => {
                             alert(error);
                          });

               },
               getRoleList(){
                  let url = rootUrl+`admin/getRoleList`;
                  axios.post(url)
                          .then(response => {
                             let data = response.data;
                             if (data.code !== 0) return;
                             this.roleList = data.data;

                          })
                          .catch(error => {
                             alert(error);
                          });
               },
               selectByRole(roleId){
                  console.log(roleId);
                  this.roleId = roleId;
                  this.getList(1);
               },
               searchByTip(){
                  console.log(this.searchTip);
                  this.getList(1);

               },
               getUser(id){
                  let url = rootUrl+`admin/getUserById?id=${id}`;
                  axios.post(url)
                          .then(response => {
                             let data = response.data;
                             if (data.code !== 0) return;
                             console.log(data);
                             this.user = data.data;

                          })
                          .catch(error => {
                             alert(error);
                          });
               },
               updateUser(){
                  console.log(this.user);
                   let url = rootUrl+`admin/updateUser`;
                   axios.post(url,this.user)
                       .then(response => {
                           let data = response.data;
                           console.log(data);
                           // 修改失败
                           if (data.code !== 0){
                               this.open4('修改失败');
                               return;
                           }
                           // 修改成功
                           console.log('修改成功：'+data.code);
                           this.open2('修改成功');
                           // 更新表数据
                           this.getList(1);

                       })
                       .catch(error => {
                           alert(error);
                       });
               },
                delUser(id){
                    // console.log(id);
                    if(!confirm("是否删除？")){
                        console.log(id);
                        return;
                    }
                    let url = rootUrl+`admin/delUser?id=${id}`;
                    axios.post(url)
                        .then(response => {
                            let data = response.data;
                            console.log(data);
                            // 修改失败
                            if (data.code !== 0){
                                this.open4('删除失败');
                                return;
                            }
                            // 修改成功
                            console.log('删除成功：'+data.code);
                            this.open2('删除成功');
                            // 更新表数据
                            this.getList(1);

                        })
                        .catch(error => {
                            alert(error);
                        });
                },
                delAll(){
                    var check = $("input:checkbox:checked");
                    //console.log(check);
                    var list = [];
                    for (let i = 0; i < check.length; i++) {
                        list.push(check[i].value);
                    }

                    console.log(list);
                    let url = rootUrl+`admin/delChecked`;
                    axios.post(url,list)
                        .then(response => {
                            let data = response.data;
                            console.log(data);
                            // 修改失败
                            if (data.code !== 0){
                                this.open4('删除失败');
                                return;
                            }
                            // 修改成功
                            console.log('删除成功：'+data.code);
                            this.open2('删除成功');
                            // 更新表数据

                            var checkUser = document.getElementsByName("checkUser");
                            for (let i = 0; i < checkUser.length; i++) {
                                checkUser[i].checked=false;
                            }
                            this.getList(1);

                        })
                        .catch(error => {
                            alert(error);
                        });
                },
                checkAll(){
                    var checkUser = document.getElementsByName("checkUser");
                    for (let i = 0; i < checkUser.length; i++) {
                        if (checkUser[i].checked){
                            checkUser[i].checked=false;
                        }else checkUser[i].checked=true;
                    }
                }
                ,
                open1(msg) {
                    this.$message({
                        showClose: true,
                        message: msg
                    });
                }, // 提示
                open2(msg) {
                    this.$message({
                        showClose: true,
                        message: msg,
                        type: 'success'
                    });
                }, // 成功
                open3(msg) {
                    this.$message({
                        showClose: true,
                        message: msg,
                        type: 'warning'
                    });
                }, // 警告
                open4(msg) {
                    this.$message({
                        showClose: true,
                        message: msg,
                        type: 'error'
                    });
                }, // 错误
            }
         });

      </script>

      <!-- fixme: element 组件测试代码块 与上面代码区分     -->
      <script>
         new Vue({
            el: '#app',
            data: function() {
               return { visible: false }
            },
             methods: {
                 open1() {
                     this.$message({
                         showClose: true,
                         message: '这是一条消息提示'
                     });
                 },

                 open2() {
                     this.$message({
                         showClose: true,
                         message: '恭喜你，这是一条成功消息',
                         type: 'success'
                     });
                 },

                 open3() {
                     this.$message({
                         showClose: true,
                         message: '警告哦，这是一条警告消息',
                         type: 'warning'
                     });
                 },

                 open4() {
                     this.$message({
                         showClose: true,
                         message: '错了哦，这是一条错误消息',
                         type: 'error'
                     });
                 }
             }
         })
      </script>

   </body>
</html>